<template>
  <div class="weui-panel full scroll-h step2-wrapper" style="background: #fff">
    <div class="weui-msg">
      <div class="weui-msg__text-area">
        <h2 class="text-center weui-msg__title">个人信息</h2>
        <!-- <p class="weui-msg__desc">填写邀请人id,如无邀请人,可填写100000</p> -->
      </div>
    </div>
    <!-- <div class="weui-cells__title">代理等级</div> -->
    <!-- <div class="weui-cells weui-cells_radio">
      <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
          <p>一级代理</p>
        </div>
        <div class="weui-cell__ft">
          <input @click="levelPromote(1)" type="radio" class="weui-check" name="radio1" id="x11">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
      <label class="weui-cell weui-check__label" for="x12">

        <div class="weui-cell__bd">
          <p>二级代理</p>
        </div>
        <div class="weui-cell__ft">
          <input @click="levelPromote(2)" type="radio" name="radio1" class="weui-check" id="x12">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
    </div>-->
    <div
      class="weui-cells__title"
      style="color: #f44336;"
    >银行卡用于发放佣金，请务必填写正确，保持姓名和卡号一致，并正确填写开户分行所在地址！</div>

    <div class="weui-cell" :class="{'weui-cell_warn': nameInvalid}">
      <div class="weui-cell__hd">
        <label class="weui-label">姓名</label>
      </div>
      <div class="weui-cell__bd">
        <input
          class="weui-input text-left width-80"
          v-model="info.realName"
          type="text"
          maxlength="20"
        >
      </div>
      <div class="weui-cell__ft">
        <!-- <i class="weui-icon-warn"></i> -->
      </div>
    </div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell" :class="{'weui-cell_warn': telphoneInvalid}">
        <div class="weui-cell__hd">
          <label class="weui-label">手机号码</label>
        </div>
        <div class="weui-cell__bd">
          <input
            class="weui-input text-left width-80"
            required
            v-model="info.telphone"
            maxlength="11"
            type="number"
            pattern="[0-9]*"
          >
        </div>
        <div class="weui-cell__ft">
          <!-- <i class="weui-icon-warn"></i> -->
        </div>
      </div>

      <div class="weui-cell" :class="{'weui-cell_warn': bankCardInvalid}">
        <div class="weui-cell__hd">
          <label class="weui-labe">银行卡号</label>
        </div>
        <div class="weui-cell__bd">
          <input
            class="weui-inputl text-left width-80"
            v-model="info.bankCard"
            type="number"
            pattern="[0-9]*"
            maxlength="30"
          >
        </div>
        <div class="weui-cell__ft">
          <!-- <i class="weui-icon-warn"></i> -->
        </div>
      </div>
      <div
        class="weui-cell"
        @click="showPicker('bank')"
        :class="{'weui-cell_warn': bankNameInvalid}"
      >
        <div class="weui-cell__hd">
          <label class="weui-label">开户银行</label>
        </div>
        <div class="weui-cell__bd address-input bank">
          <span class="weui-input text-left width-80 dashed-border">{{info.bankName}}</span>
          <!-- <span>银行</span> -->
        </div>
        <div class="weui-cell__ft">
          <!-- <i class="weui-icon-warn"></i> -->
        </div>
      </div>
      <div class="weui-cell" :class="{'weui-cell_warn': bankNameInvalid}">
        <div class="weui-cell__hd">
          <label class="weui-label">开户行分行</label>
        </div>
        <div class="weui-cell__bd address-input subbranch">
          <input
            class="weui-input text-left width-80"
            v-model="info.subbranch"
            type="text"
            placeholder
            maxlength="20"
          >
          <!-- <span>分(支)行</span> -->
        </div>
        <div class="weui-cell__ft">
          <!-- <i class="weui-icon-warn"></i> -->
        </div>
      </div>

      <div
        class="weui-cell"
        @click="showPicker('addr')"
        :class="{'weui-cell_warn': addressInvalid}"
      >
        <div class="weui-cell__hd">
          <label class="weui-label">开户行地址</label>
        </div>
        <div class="weui-cell__bd address-input subbranch">
          <span
            class="weui-input text-left dashed-border width-80"
          >{{info.province}}{{info.city}}{{info.district}}</span>
          <!-- <span>省</span> -->
        </div>
        <!-- <div class="weui-cell__bd address-input city">
            <input disabled class="weui-input text-left" v-model="info.city" type="text" maxlength="60" placeholder="">
            <span>市</span>
        </div>-->
        <div class="weui-cell__ft">
          <!-- <i class="weui-icon-warn"></i> -->
        </div>
      </div>

      <!-- <div class="weui-cell"   :class="{'weui-cell_warn': addressInvalid}">
          <div class="weui-cell__hd">
            <label class="weui-label"></label>
          </div>
          <div class="weui-cell__bd address-input district">
            <input disabled class="weui-input text-left" v-model="info.district" type="text" maxlength="60" placeholder="">
            <span>区/县/乡/镇</span>
          </div>
          <div class="weui-cell__ft">
            <i class="weui-icon-warn"></i>
          </div>
      </div>-->

      <div class="weui-msg__opr-area margin-20">
        <p class="weui-btn-area">
          <a
            class="weui-btn weui-btn_primary"
            :class="{'weui-btn_disabled': !canSubmit}"
            @click="showBankQuery = true"
          >
            <span v-show="!applying">确认修改</span>
            <span v-show="applying">提交修改中...</span>
          </a>
        </p>
      </div>
      <div class="weui-msg__opr-area" @click="playSound">
        <p class="weui-btn-area">
          <a @click="$router.push('/IdCard')" class="weui-btn weui-btn_primary">实名认证</a>
        </p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a @click="back" class="weui-btn weui-btn_default">返回首页</a>
        </p>
      </div>
    </div>
    <awesome-picker
      ref="pickerBank"
      :data="bankData"
      @cancel="handlePickerCancel"
      @confirm="handlePickerConfirm"
    ></awesome-picker>
    <awesome-picker
      ref="pickerAddr"
      :data="addrData"
      @cancel="handlePickerCancel"
      @confirm="handlePickerConfirm"
    ></awesome-picker>

    <div class="weui-mask weui-mask--visible" v-if="showBankQuery">
      <div class="weui-dialog weui-dialog--visible">
        <div class="weui-dialog__hd">
          <strong class="weui-dialog__title">提示</strong>
        </div>
        <div class="weui-dialog__bd" style="text-align: left;">
          <p class="branch-text">银行卡开户行信息查询步骤</p>
          <p class="branch-text">邮政储蓄银行：拨打客服电话95580 → 按1 → 按4→ 输入卡号→按# 结束→按1信息发送至手机</p>
          <p class="branch-text">农业银行：拨打客服电话95599→按5→按1→输入卡号→按# 结束</p>
          <p class="branch-text">中国银行：拨打客服电话95566→按2→按1→按1→输入卡号→按# 结束</p>
          <p class="branch-text">建设银行：拨打客服电话95533→按1→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">工商银行：拨打客服电话95588→按 #→按1→按3→输入卡号→按# 结束</p>
          <p class="branch-text">招商银行：拨打客服电话95555→按 3→按1→按2→输入卡号→按# 结束</p>

          <p style="color: #f44336;">必须正确填写支行信息, 否则无法发放工资.</p>

          <div class="check-box-branch">
            <input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red" v-model="isFullyNoted" />
            <label for="color-input-red">
              我已了解以上信息
            </label >
          </div>
        </div>
        <div class="weui-dialog__ft">
          <button @click="onTipsConfirm" :disabled="!isFullyNoted" class="weui-btn":class="!isFullyNoted ? 'weui-btn_default' : 'weui-btn_primary'">确定</button>
          <button @click="showBankQuery = false; isFullyNoted = false" class="weui-btn weui-btn_default" style="margin-top: 0;" >取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "Vuex";
import Addr from "../lib/address";

const BankData = [
  "中国银行",
  "中国工商银行",
  "中国建设银行",
  "中国农业银行",
  "招商银行",
  "交通银行",
  "中国民生银行",
  "中信银行",
  "浦东发展银行",
  "兴业银行",
  "平安银行",
  "广发银行",
  "中国光大银行",
  "中国邮政储蓄银行",
  "长沙银行"
];

export default {
  data() {
    return {
      telphoneInvalid: false,
      nameInvalid: false,
      bankNameInvalid: false,
      bankCardInvalid: false,
      addressInvalid: false,
      applying: false,
      showBankQuery: false,
      isFullyNoted: false,
      info: {
        telphone: "",
        realName: "",
        bankName: "",
        bankCard: "",
        alipayAccount: "",
        proxyLevel: 3,
        province: "",
        city: "",
        district: "",
        subbranch: ""
      },
      bankData: [BankData],
      addrData: Addr,
    };
  },
  mounted() {
    this.queryInfo();
  },
  methods: {
    ...mapMutations(["changeSubmitRes", "changeProxyLevel"]),
    levelPromote(level) {
      console.log(level);
      const tipText =
        level === 1
          ? "一级代理：充值500元，可得到一级代理权限和500个钻石"
          : "二级代理：充值200元，可得到二级代理权限和200个钻石";
      $.alert(tipText);
    },
    queryInfo() {
      this.api.homePage
        .queryInfo()
        .then(res => res.json())
        .then(data => {
          console.error("queryInfo", data);
          this.info = data.source;
          // this.info.province = this.info.province.replace('省', '')
          // this.info.city = this.info.city.replace('市', '')
          // this.info.district = this.info.district.replace('区', '')
          // this.info.bankName = this.info.bankName.replace('银行', '')
          // this.info.subbranch = this.info.subbranch.replace('行', '')
        });
    },
    // 读完提示后确定才提交
    onTipsConfirm() {
      this.showBankQuery = false;
      this.submitInfo();
    },
    submitInfo() {
      window.btn_sound.play();
      if (!this.canSubmit || this.applying) {
        return;
      }
      let send = {};
      send.info = {
        proxyLevel: this.proxyLevel,
        lftid: this.info.lftid,
        uid: this.info.uid,
        telphone: this.info.telphone,
        realName: this.info.realName,
        bankName: this.info.bankName,
        bankCard: this.info.bankCard,
        alipayAccount: this.info.alipayAccount,
        subbranch: this.info.subbranch,
        province: this.info.province,
        city: this.info.city,
        district: this.info.district
      };
      console.error(send.info);
      this.applying = true;
      this.api.homePage
        .editInfo(send)
        .then(res => res.json())
        .then(data => {
          console.log("editInfo", data);
          $.alert(data.message);
          this.back();
        });
    },
    back() {
      window.btn_sound.play();
      this.$router.push("/");
    },
    showPicker(type) {
      this.pickerType = type;
      if (type === "bank") {
        this.$refs.pickerBank.show();
      } else if (type === "addr") {
        this.$refs.pickerAddr.show();
      }
      window.btn_sound.play();
    },
    playSound() {
      window.btn_sound.play();
    },
    handlePickerCancel() {},
    handlePickerConfirm(ev) {
      if (this.pickerType === "bank") {
        this.info.bankName = ev[0].value;
      } else if (this.pickerType === "addr") {
        // this.info.province = ev[0].value.replace(/(省|市|自治区|特别行政区)/, '');
        this.info.province = ev[0].value;
        this.info.city = ev[1].value;
        this.info.district = ev[2].value;
        // if(!ev[1].value.match('市辖区')) {
        //   this.info.city = ev[1].value.replace(/(市|地区)/, '');
        // } else {
        // }
        // if(!ev[2].value.match('市辖区')) {
        //   this.info.district = ev[2].value.replace(/(区|市|县|乡|镇)/, '');
        // } else {
        // }
      }
    }
  },
  activated() {
    console.log(this.upperAgentRes.data);
  },
  computed: {
    ...mapState(["upperAgentRes", "submitRes", "api"]),
    canSubmit() {
      this.telphoneInvalid = this.info.telphone === "";
      this.nameInvalid = this.info.realName === "";
      this.bankNameInvalid =
        this.info.bankName === "" || this.info.subbranch === "";
      this.bankCardInvalid = this.bankCard === "";
      this.addressInvalid =
        this.info.province === "" ||
        this.info.city === "" ||
        this.info.district === "";
      return (
        !(
          this.telphoneInvalid ||
          this.nameInvalid ||
          this.bankNameInvalid ||
          this.bankCardInvalid ||
          this.addressInvalid
        ) && !this.applying
      );
    }
  },
  components: {}
};
</script>

<style lang="less" scoped>
input {
  color: black !important;
  text-align: center;
}

.weui-label {
  color: black !important;
}
.weui-cell_warn {
  color: black !important;
}

.address-input {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  span {
    white-space: nowrap;
    width: 70%;
    text-align: center;
  }
}

.province {
  width: 16%;
  flex-basis: 16%;
}

.city {
  width: 16%;
  flex-basis: 16%;
}

.district {
  width: 36%;
  flex-basis: 36%;
  span {
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
  }
  input {
    min-width: 42%;
    width: 42%;
  }
}

.bank {
  width: 19.5%;
  flex-basis: 19.5%;
}

.subbranch {
  width: 45.5%;
  flex-basis: 45.5%;
}
.weui-cell {
  padding: 10px 6px !important;
}
.weui-label {
  // width: 84px!important;
  width: 100% !important;
  white-space: nowrap;
}

.step2-wrapper {
  input {
    border: dashed 1px #aba;
    border-radius: 4px;
    padding: 0 5px;
  }
}

[class*=" weui-icon-"]:before,
[class^="weui-icon-"]:before {
  display: inline-block;
  margin-left: 0.2em;
  margin-right: 0 !important;
}
.weui-icon-warn {
  font-size: 19px !important;
}
.weui-cell__hd {
  flex-basis: 25%;
  width: 25%;
}
.weui-cells__title {
  padding-left: 8px;
  padding-right: 8px;
}
.text-left {
  text-align: left;
}

.width-80 {
  width: 80%;
}

.weui-msg__opr-area {
  margin-bottom: 14px !important;
  .weui-btn-area {
    margin: 2px 58px 0.3em !important;
  }
}
.dashed-border {
  border: 1px dashed #aba;
  border-radius: 4px;
  padding: 0 5px;
  width: 80% !important;
}
.margin-20 {
  margin-top: 2.3rem;
}
.weui-dialog {
  width: 90%!important;
  max-width: 400px;
}

</style>